<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.10/css/layui.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.10/layui.js"></script>    
    <script src="./src/lib/xm-select_1.2.4.js"></script>
    <script src="./src/lib/knockout_3.5.1.debug.js"></script>
    <script> window.$ = tools.laymod('jquery'); layui.cache.debug = true; </script>
    <script type="module" src="./src/layui-ko.debug.js"></script>
    <!-- <script src="./dist/layui-ko-1.0.0.js"></script> -->
    <style>
        .layui-form-item .layui-rate .layui-inline {
            margin-bottom: 0px;
            margin-right: 0px;
        }
    </style>
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>Layui原生组件 扩展绑定</legend>
    </fieldset>
    <form class="layui-form" action="" lay-filter="main-from">
        <div class="layui-form-item">
            <label class="layui-form-label">验证必填项</label>
            <div class="layui-input-block">
                <input data-bind="value:username" type="text" name="username" lay-verify="required" placeholder="请输入"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">验证手机号</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input data-bind="value:phone" type="tel" name="phone" lay-verify="required|phone"
                        autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
                </div>
                <div class="layui-form-mid" style="padding: 0!important;">
                    <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline layui-input-wrap">
                <input data-bind="value:vercode" type="text" name="vercode" lay-verify="required" autocomplete="off"
                    lay-affix="clear" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">验证邮箱</label>
                <div class="layui-input-inline">
                    <input data-bind="value:email" type="text" name="email" lay-verify="email" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">验证日期</label>
                <div class="layui-input-inline layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <!-- config 默认为  { format:'yyyy-MM-dd',type:'date' } -->
                    <input data-bind="laydate:date" 
                        type="text" 
                        name="date" 
                        id="date" 
                        lay-verify="date"
                        lay-options="{type: 'datetime'}"
                        placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">日期范围</label>
                <!-- config 默认为  { format:'yyyy-MM-dd',type:'date' } -->
                <!-- 优先寻找 .date-begin 和 .date-end 的子元素作为 begin-range，没有则寻找两个 input[type='text'] -->
                <div data-bind="laydate:{begin:date_begin,end:date_end,config:{ format: 'yyyy-MM-dd', type: 'date' }}"
                    class="layui-inline" id="ID-laydate-range">
                    <div class="layui-input-inline">
                        <input type="text" name="date_begin" autocomplete="off" id="ID-laydate-start-date-1"
                            class="layui-input date-begin" placeholder="开始日期">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" name="date_end" autocomplete="off" id="ID-laydate-end-date-1"
                            class="layui-input date-end" placeholder="结束日期">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">自定义验证</label>
            <div class="layui-input-inline layui-input-wrap">
                <input data-bind="value:password" type="password" name="password" lay-verify="required|pass"
                    placeholder="请输入" autocomplete="off" lay-affix="eye" class="layui-input">
            </div>
            <div class="layui-form-mid layui-text-em">6 到 12 位字符</div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">范围</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input data-bind="layvalue:price_min" type="number" lay-affix="number" name="price_min"
                        placeholder="￥" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input data-bind="layvalue:price_max,valueEvent:'input'" type="number" lay-affix="number"
                        name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单行选择框</label>
            <div class="layui-input-block">
                <select data-bind="layvalue:interest" name="interest" lay-filter="aihao">
                    <option value=""></option>
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                    <option value="2">游戏</option>
                    <option value="3">音乐</option>
                    <option value="4">旅行</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">分组选择框</label>
                <div class="layui-input-inline">
                    <select data-bind="layvalue:quiz" name="quiz">
                        <option value="">请选择问题</option>
                        <optgroup label="城市记忆">
                            <option value="你工作的第一个城市">你工作的第一个城市</option>
                        </optgroup>
                        <optgroup label="学生时代">
                            <option value="你的工号">你的工号</option>
                            <option value="你最喜欢的老师">你最喜欢的老师</option>
                        </optgroup>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">搜索选择框</label>
                <div class="layui-input-inline">
                    <select id="laymodules" data-bind="layvalue:modules" name="modules" lay-verify="required"
                        lay-search>
                        <option value="">直接选择或搜索选择</option>
                        <option value="1">layer</option>
                        <option value="2">form</option>
                        <option value="3">layim</option>
                        <option value="4">element</option>
                        <option value="5">laytpl</option>
                        <option value="6">upload</option>
                        <option value="7">laydate</option>
                        <option value="8">laypage</option>
                        <option value="9">flow</option>
                        <option value="10">util</option>
                        <option value="11">code</option>
                        <option value="12">tree</option>
                        <option value="13">layedit</option>
                        <option value="14">nav</option>
                        <option value="15">tab</option>
                        <option value="16">table</option>
                        <option value="17">select</option>
                        <option value="18">checkbox</option>
                        <option value="19">switch</option>
                        <option value="20">radio</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联动选择框</label>
            <div class="layui-input-inline">
                <select name="quiz1">
                    <option value="">请选择省</option>
                    <option value="浙江" selected>浙江省</option>
                    <option value="你的工号">江西省</option>
                    <option value="你最喜欢的老师">福建省</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="quiz2">
                    <option value="">请选择市</option>
                    <option value="杭州">杭州</option>
                    <option value="宁波" disabled>宁波</option>
                    <option value="温州">温州</option>
                    <option value="温州">台州</option>
                    <option value="温州">绍兴</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="quiz3">
                    <option value="">请选择县/区</option>
                    <option value="西湖区">西湖区</option>
                    <option value="余杭区">余杭区</option>
                    <option value="拱墅区">临安市</option>
                </select>
            </div>
            <div class="layui-form-mid layui-text-em">
                <i class="layui-icon layui-icon-tips" lay-tips="{
              content: '此处只是演示联动排版，并未做联动交互',
              margin: '0 0 0 -10px'
            }"></i>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input data-bind="laychecked:arr" type="checkbox" name="arr[0]" value="0" id="xx1" title="选项1">
                <input data-bind="laychecked:arr" type="checkbox" name="arr[1]" value="1" title="选项2">
                <input data-bind="laychecked:arr" type="checkbox" name="arr[2]" value="2" title="选项3">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标签框</label>
            <div class="layui-input-block">
                <input type="checkbox" data-bind="laychecked:arr" value="0" name="arr1[0]" lay-skin="tag" title="选项1"
                    checked>
                <input type="checkbox" data-bind="laychecked:arr" value="1" name="arr1[1]" id="tag2" lay-skin="tag"
                    title="选项2">
                <input type="checkbox" data-bind="laychecked:arr" value="2" name="arr1[2]" lay-skin="tag" title="选项3"
                    disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input data-bind="laychecked:singleSwitch" type="checkbox" name="open" lay-skin="switch"
                        lay-filter="switchTest" title="ON|OFF">
                </div>
            </div>
            <div class="layui-input-inline">
                <label class="layui-form-label">复选</label>
                <div class="layui-input-block">
                    <input data-bind="laychecked:singleCheckbox" type="checkbox" name="fx" lay-skin="tag" lay-text="哈">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input data-bind="laychecked:sex" id="lsex-nan" lay-filter="lsex" type="radio" name="sex" value="男"
                    title="男" checked>
                <input data-bind="laychecked:sex" lay-filter="lsex" type="radio" name="sex" value="女" title="女">
                <input data-bind="laychecked:sex" lay-filter="lsex" type="radio" name="sex" value="禁" title="禁用"
                    disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input data-bind="laychecked:sex" id="lsex2-nan" lay-filter="lsex2" type="radio" name="sex2" value="男"
                    title="男" checked>
                <input data-bind="laychecked:sex" lay-filter="lsex2" type="radio" name="sex2" value="女" title="女">
                <input data-bind="laychecked:sex" lay-filter="lsex2" type="radio" name="sex2" value="禁" title="禁用"
                    disabled>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">普通文本域</label>
            <div class="layui-input-block">
                <textarea data-bind="value:area" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">滑块</label>
            <div class="layui-input-block">               
                <div data-bind="layslider:{value:slider}" lay-options="{min:0,max:100,range:false}"></div>
            </div>
        </div>
        <div class="layui-form-item">
            
            <label class="layui-form-label">滑块(范围)</label>
            <div class="layui-input-block">
                <div
                    data-bind="layslider:{range:sliderRange,config:configs.sliderRange},laydisable:false">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">评分</label>
            <div class="layui-input-block">
                <div class="class-rate-demo-theme" data-bind="layrate:rate,laydisable:rateDisable"
                    lay-options="{theme: '#1E9FFF', half: true}"></div>
            </div>
        </div>
        <div class="layui-from-item">
            <label class="layui-form-label">穿梭框(只读)</label>
            <div class="layui-input-block">
                <!-- transfer -->
                <div id="transfer-demo" data-bind="laytransfer:{value:transfer,config:configs.transfer}"></div>
            </div>
        </div>
        <div class="layui-from-item" style="margin-top: 20px;">
            <label class="layui-form-label">进度条(只写)</label>
            <div class="layui-input-block">
                <div class="layui-progress layui-progress-big" data-bind="layvalue:progeress" lay-showpercent="true">
                    <div class="layui-progress-bar" lay-percent="0%"></div>
                </div>
            </div>
        </div>
        <div class="layui-from-item" style="margin-top: 20px;">
            <label class="layui-form-label">表格</label>
            <div class="layui-input-block">
                <table id="table" data-bind="laytable:{data:tableData,config:configs.table}"></table>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>Layui生态第三方组件 扩展绑定</legend>
        </fieldset>
        <div class="layui-from-item">
            <label class="layui-form-label">XmlSelect</label>
            <div class="layui-input-block">
                <div data-bind="xmselect:{value:xSelValue,config:configs.xmSelect}"></div>
            </div>
        </div>

        <div class="layui-form-item" style="margin-top:50px">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
    <script>
        
        window.tableData = [{
                "id": "10001"
                ,"username": "李白"
                ,"email": "test1@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
                ,"experience": "12"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10002"
                ,"username": "杜甫"
                ,"email": "test2@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "舍南舍北皆春水，但见群鸥日日来。花径不曾缘客扫，蓬门今始为君开。盘飧市远无兼味，樽酒家贫只旧醅。肯与邻翁相对饮，隔篱呼取尽余杯。"
                ,"experience": "116"
                ,"ip": "192.168.0.8"
                ,"checkin": "108"
                ,"joinTime": "2016-10-14"
                ,"LAY_CHECKED": true
            }, {
                "id": "10003"
                ,"username": "苏轼"
                ,"email": "test3@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。"
                ,"experience": "65"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10004"
                ,"username": "李清照"
                ,"email": "test4@email.com"
                ,"sex": "女"
                ,"city": "浙江杭州"
                ,"sign": "昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否？应是绿肥红瘦。"
                ,"experience": "777"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10005"
                ,"username": "冰心"
                ,"email": "test5@email.com"
                ,"sex": "女"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "86"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10006"
                ,"username": "张三"
                ,"email": "test6@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "12"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10007"
                ,"username": "张三7"
                ,"email": "test7@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "16"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10008"
                ,"username": "张三8"
                ,"email": "test8@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10009"
                ,"username": "张三9"
                ,"email": "test9@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10010"
                ,"username": "张三10"
                ,"email": "test10@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10011"
                ,"username": "张三11"
                ,"email": "test11@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10012"
                ,"username": "张三12"
                ,"email": "test12@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10013"
                ,"username": "张三13"
                ,"email": "test13@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10014"
                ,"username": "张三14"
                ,"email": "test14@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10015"
                ,"username": "张三15"
                ,"email": "test15@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10016"
                ,"username": "张三16"
                ,"email": "test16@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10017"
                ,"username": "张三17"
                ,"email": "test17@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10018"
                ,"username": "张三18"
                ,"email": "test18@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10019"
                ,"username": "张三19"
                ,"email": "test19@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10020"
                ,"username": "张三20"
                ,"email": "test20@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10021"
                ,"username": "张三21"
                ,"email": "test21@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10022"
                ,"username": "张三22"
                ,"email": "test22@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10023"
                ,"username": "张三23"
                ,"email": "test23@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10024"
                ,"username": "张三24"
                ,"email": "test24@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "保持真善美，温和待人"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"checkin": "106"
                ,"joinTime": "2016-10-14"
            }];
           
        layui.use(['form', 'laydate', 'util'], function () {
            var form = tools.laymod('form');
            var layer = layui.layer;
            var laydate = tools.laymod('laydate');
            var util = layui.util;
            var transfer = layui.transfer;

            // 自定义验证规则
            form.verify({
                pass: [
                    /^[\S]{6,12}$/,
                    '密码必须6到12位，且不能出现空格'
                ]
            });

            // 指定开关事件
            form.on('switch(switchTest)', function (data) {
                layer.msg('开关 checked：' + (this.checked ? 'true' : 'false'), {
                    offset: '6px'
                });
                layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
            });

            // 提交事件
            form.on('submit(demo1)', function (data) {
                var field = data.field; // 获取表单字段值
                // 显示填写结果，仅作演示用
                layer.alert(JSON.stringify(field), {
                    title: '当前填写的字段值'
                });
                // 此处可执行 Ajax 等操作
                // …
                return false; // 阻止默认 form 跳转
            });

            // 普通事件
            util.on('lay-on', {
                // 获取验证码
                "get-vercode": function (othis) {
                    var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增 
                    // 验证通过
                    if (isvalid) {
                        layer.msg('手机号规则验证通过');
                        // 此处可继续书写「发送验证码」等后续逻辑
                        // …
                    }
                }
            });

            window.configs = {
                dateConfig: {
                    format: 'yyyy-MM-dd HH:mm:ss',
                    type: 'datetime',
                    done: function (value, date, endDate) {
                        console.log(value, date, endDate);
                    },
                },
                sliderRange: {
                    value: [10, 30],
                    min: 0,
                    max: 100,
                    range: true,
                    change: function (newValue) {
                        //console.log(newValue);
                    }
                },
                transfer: {
                    elem: '#transfer-demo',
                    title: ['候选列表', '已选列表'],
                    data: [{
                        value: 1,
                        title: '李白'
                    }, {
                        value: 2,
                        title: '杜甫'
                    }, {
                        value: 3,
                        title: '贤心'
                    }, {
                        value: 4,
                        title: '王勃'
                    }, {
                        value: 5,
                        title: '李清照'
                    }, {
                        value: 6,
                        title: '鲁迅',
                        disabled: true
                    }],
                    value: [1, 3, 5],
                    showSearch: true
                },
                xmSelect: {
                    data: [
                        { name: '张三', value: 1 },
                        { name: '李四', value: 2 },
                        { name: '王五', value: 3 },
                    ]
                },
                table: {
                    //elem: '#test',
                    id: 'tabletest',
                    //url: 'https://layui.dev/static/2.8/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口                    
                    //data: [],
                    defaultToolbar: ['filter', 'exports', 'print', {
                        title: '提示',
                        layEvent: 'LAYTABLE_TIPS',
                        icon: 'layui-icon-tips'
                    }],
                    height: 500, // 最大高度减去其他容器已占有的高度差
                    css: [ // 重设当前表格样式
                        '.layui-table-tool-temp{padding-right: 145px;}'
                    ].join(''),
                    cellMinWidth: 80,
                    totalRow: false, // 开启合计行
                    toolbar: true,
                    page: false,
                    cols: [[
                        { type: 'checkbox', fixed: 'left' },
                        { field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true, totalRowText: '合计：' },
                        { field: 'username', width: 80, title: '用户' },
                        { field: 'email', title: '邮箱 <i class="layui-icon layui-icon-tips layui-font-14" lay-event="email-tips" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', fieldTitle: '邮箱', hide: 0, width: 150, edit: 'text' },
                        { field: 'sex', width: 80, title: '性别', sort: true },
                        {
                            field: 'city', width: 115, title: '城市', minWidth: 115, templet: '#cityTpl', exportTemplet: function (d, obj) {
                                // console.log(obj)
                                // 处理该字段的导出数据
                                var td = obj.td(this.field); // 获取当前 td
                                return td.find('select').val();
                            }
                        },
                        { field: 'sign', title: '签名', edit: 'textarea', minWidth: 260, style: '-moz-box-align: start;'},
                        { field: 'experience', width: 100, title: '积分', sort: true },
                        { field: 'checkin', title: '打卡', width: 100, sort: true },
                        { field: 'ip', title: 'IP', width: 120 },
                        { field: 'joinTime', title: '加入时间', width: 120 }                        
                    ]],
                    done: function () {
                        
                    }
                }
            }
            
            var vmode = {
                username: ko.observable('用户名'), //用户名
                phone: ko.observable('15672400682'), //手机号
                vercode: ko.observable(''),//验证码
                email: ko.observable('1083092844@qq.com'), //邮箱
                password: ko.observable('123456'),//密码
                price_min: ko.observable(0),   //范围-start
                price_max: ko.observable(100), //范围-end
                interest: ko.observable(3),  //单行选择框
                quiz: ko.observable('你最喜欢的老师'), //分组选择框
                modules: ko.observable(10), //搜索选择框
                date: ko.observable('2019-10-10 10:00:00'), //日期时间
                date_begin: ko.observable('2019-10-30'), //日期范围-start
                date_end: ko.observable('2023-02-14'), //日期范围-end
                arr: ko.observableArray(['0', '1']), //复选框(复合绑定)
                //tagarr: ko.observableArray(['0', '1']), //标签框
                singleSwitch: ko.observable(false), //开关
                singleCheckbox: ko.observable(true), //复选框
                sex: ko.observable('女'), //单选框
                area: ko.observable('默认值'), //文本域
                slider: ko.observable(10), //滑块
                sliderRange: ko.observableArray([20,80]), //滑块(范围)
                rate: ko.observable(2.5), //评分
                rateDisable: ko.observable(false), //评分(禁用控制)
                transfer: ko.observableArray([1, 4]), //穿梭框(只读)
                progeress: ko.observable(50), //进度条(只写)
                xSelValue: ko.observableArray([1, 2]), //xmSelect 这里填ID
                tableData: ko.observableArray(tableData), //表格
            }

            ko.applyBindings(vmode);

            //vmode.interest.value(1);

            window.vmode = vmode;
        });

    </script>
</body>

</html>